<template>
  <div class="board">
    <div class="mark-wrap">
      <div class="comments-top">
        {{ count }}留言
      </div>
      <CommentForm @refresh="getComment"/>
      <CommentsItem v-for="comment in self.comments" :comments="comment" :key="comment.id"/>
      <a-back-top :visibilityHeight="300"/>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref, onMounted, getCurrentInstance} from "vue";
import 'highlight.js/styles/github.css'
import CommentForm from '../common/comment-form.vue'
import CommentsItem from '../common/comments-item.vue'
import {GetCommentList} from '../../utils/api'

let count = ref(0)
let current = ref('test')
let textarea = ref('')
const self = reactive({
  comments: [],

})


//获取评列表
const getComment = () => {
  console.log('getComment')
  GetCommentList().then(res => {
    console.log(res)
    count.value = res.count
    self.comments = res.data
  })
}

onMounted(() => {
  getComment()

  window.addEventListener('scroll', () => {
    const windowH = document.documentElement.clientHeight // 元素高度
    const documentH = document.body.scrollHeight // 可滑动高度
    const scrollH = document.documentElement.scrollTop // 滑动高度，滑块到顶部的距离
    if (windowH + scrollH >= documentH) {
      console.log('触底')
      const instance = getCurrentInstance()
      console.log(instance)
    }
  })
})
</script>
<style scoped>

.board {
  width: 100%;
  padding: 40px 15vw 0;
}

.mark-wrap {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
}

.comments-top {
  height: 70px;
  font-size: 20px;
  font-weight: bold;
  color: #6b6a6a;
}

</style>